<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>gradient</title>
    <style>
        #shape {
            stroke-width: 6px;
            fill: transparent;
            stroke: #009FFD;
            stroke-dasharray: 85 400;
            stroke-dashoffset: -220;
            transition: 1s all ease
        }
        
        .svgBtn:hover #shape {
            stroke-dasharray: 70 0;
            stroke-width: 3px;
            stroke-dashoffset: 0;
            stroke: #06D6A0
        }
        
        #line {
            stroke-dashoffset: 320px;
            transition: 1s all ease
        }
        
        .svgLine:hover #line {
            stroke-dashoffset: 0;
        }
        
        #circle {
            /*设置圆的stroke-dasharray和stroke-dashoffset，为圆的周长*/
            transition: all 2s;
            stroke-dasharray: 314, 314;
            stroke-dashoffset: 314;
        }
        
        .svgCircle:hover #circle {
            stroke-dashoffset: 0;
        }
    </style>
</head>

<body>
    <!--
      渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。
      SVG渐变主要有两种类型：
        - Linear 线性渐变
            <linearGradient>元素用于定义线性渐变。线性渐变可以定义为水平，垂直或角渐变：
              - 当y1和y2相等，而x1和x2不同时，可创建水平渐变
              - 当x1和x2相等，而y1和y2不同时，可创建垂直渐变
              - 当x1和x2不同，且y1和y2不同时，可创建角形渐变
              渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个<stop>标签来规定。offset属性用来定义渐变的开始和结束位置。
                文本是从自身左下角（以给出的坐标数据为原点）开始的，文字大小的改变都沿着往右上角的射线，始终在第一象限。
                添加文本跟绘制图形的坐标方向是不一样的，这个点得注意。
        - Radial 放射性渐变 
            <radialGradient>元素用于定义放射性渐变 径向渐变。
              - cx 定义一个中心点的 x 轴坐标
              - cy 定义一个中心点的 y 轴坐标
              - r  用来定义圆的半径
              - fx 定义径向渐变的焦点的 x 轴坐标。如果该属性没有被定义，就假定它与中心点是同一位置。
              - fy 定义径向渐变的焦点的 y 轴坐标。如果该属性没有被定义，就假定它与中心点是同一位置。
              - fr 定义径向渐变的焦点的半径。若该属性没有被定义，默认值为 0%。
    -->
    <p>linearGradient</p>
    <svg xmlns="http://www.w3.org/2000/svg">
        <!-- 定义滤镜 -->
        <defs>
            <linearGradient id="grad1" x1="0%" x2="100%" y1="0%" y2="100%">
              <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
              <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
            </linearGradient>
        </defs>
        <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)"></ellipse>
        <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="80">SVG</text>
    </svg>
    <p>radialGradient</p>
    <svg xmlns="http://www.w3.org/2000/svg">
        <!-- 定义滤镜 -->
        <defs>
            <radialGradient id="grad2" cx="50%" cy="50%" r="30%" fx="50%" fy="50%" fr="50%">
              <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
              <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
            </radialGradient>
        </defs>
        <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)"></ellipse>
        <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="80">SVG</text>
    </svg>
</body>

</html>